<template>
	<view>
		<view v-if="show" style="z-index: 100;" class="position-absolute left-0 top-0 right-0 bottom-0 flex align-center justify-center">
			<view class="text-muted font-sm">
				加载中...
			</view>
		</view>
		<view style="height: 44px;" class=""></view>
		<view class="flex align-center justify-center font-lg text-muted" style="margin-top: 100rpx;margin-bottom:80rpx;">
			欢迎回来
		</view>
		<view class="px-4">
			<input type="text" v-model="form.username" class="uni-input bg-light rounded mb-4" placeholder="手机号/用户名/邮箱" />
			<input type="password" v-model="form.password" class="uni-input bg-light rounded mb-4" placeholder="请输入密码" />
			<input v-if="type==='reg'" type="password" v-model="form.repassword" class="uni-input bg-light rounded mb-4" placeholder="确认密码" />
			<view @click="submit" hover-class="bg-main-hover" class="bg-main text-white flex align-center justify-center font-md py-2 rounded-circle ">
				{{type==='login'?'登录':'注册'}}
			</view>
			<view class="flex align-center justify-center pt-5">
				<view class="text-muted  font-sm" @click="changeType">
					{{type==='login'?'注册账号':'去登陆'}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 'login',
				form: {
					username: '',
					password: '',
					repassword: ''
				},
				show:true
			}
		},
		onLoad() {
			if(uni.getStorageSync('token')){
				return uni.switchTab({
					url:'../index/index'
				})
			}
			this.show=false
		},
		methods: {
			changeType() {
				this.type = this.type === 'login' ? 'reg' : 'login'
			},
			submit() {
				let msg = this.type === 'login' ? '登录' : '注册'
				this.$H.post('/' + this.type, this.form).then(res => {
					uni.showToast({
						title: msg + '成功',
						icon: 'none'
					});
					if (this.type === 'login') {
						this.$store.dispatch('login',res).then(res => {
							uni.switchTab({
								url: '../index/index'
							})
						})
					} else {
						this.form = {
							username: '',
							password: '',
							repassword: ''
						}
						this.type='login'
						
					}
				})
			}
		}
	}
</script>

<style>

</style>
